import React from 'react';
import Utils from '../../utils/utils'
import {fetch, post} from '../../my_axios/api'
import {Card, Button, Table, Icon, Modal, message,Row,Col} from 'antd';
import {setBreadcrumb} from'../../redux/action/index'
import {connect} from 'react-redux'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import  'echarts/lib/chart/pie';
import 'echarts/lib/component/legend';
import './index.less'
class Home extends React.Component {
    componentDidMount() {
        const { BMap, BMAP_STATUS_SUCCESS } = window
        var map = new BMap.Map("home_map"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
        var p1 = new BMap.Point(116.301934, 39.977552);
        var p2 = new BMap.Point(116.508328, 39.919141);
        var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
        driving.search(p1, p2);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('home_chart'));
        // 绘制图表
        myChart.setOption({
            tooltip: {},
            xAxis: {
                data: ["数据1", "数据2", "数据3", "数据4", "数据5", "数据6"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        var myChart_tow = echarts.init(document.getElementById('home_pie'));
        // 绘制图表
        myChart_tow.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['直接访问','邮件营销','联盟广告']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},

                    ]
                }
            ]
        });
    }
    componentWillMount() {
        const {dispatch}=this.props;
        dispatch(setBreadcrumb('',''));
    }
    render() {
        return (
            <div style={{background:"#ffffff"}} id="home_page">
                <Row gutter={20}>
                    <Col span={16}>
                        <Card bodyStyle={{padding:15}}>
                            <div id="home_map" style={{height:window.innerHeight-110,width:'100%'}}></div>
                        </Card>
                    </Col>
                    <Col span={8} >
                        <Card bodyStyle={{padding:0}} style={{width:'100%'}}>
                            <div  id="home_chart" style={{height:window.innerHeight*0.5-40,width:'80%'}}></div>
                            <div  id="home_pie" style={{height:window.innerHeight*0.5-40,width:'80%',paddingLeft:30}}>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}
const mapStateToProps= (state)=>{
    return{
        navLeft:state.navLeft,
    }
};
export default connect(mapStateToProps)(Home)